<style>
    
</style>


<!-- 搜索表单 -->
<div class="layui-form search-container" style="margin-bottom: 15px; padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid #e6e6e6;">
    <div class="layui-form-item" style="margin-bottom: 0;">
        <div class="layui-input-inline" style="max-width: 320px;"> <!-- 增加最大宽度限制 -->
            <input type="text" id="searchKeyword" placeholder="请输入任务名称或描述" class="layui-input" style="border-radius: 4px; border-color: #dcdfe6; transition: all 0.3s;">
        </div>
        <div class="layui-input-inline" style="max-width: 160px;"> <!-- 增加最大宽度限制 -->
            <select id="searchStatus" class="layui-select" style="border-radius: 4px; border-color: #dcdfe6; width: 100%;"> <!-- 选择框占满宽度 -->
                <option value="">全部状态</option>
                <option value="1">未开始</option>
                <option value="2">进行中</option>
                <option value="3">已完成</option>
                <option value="4">已结束</option>
            </select>
        </div>
        <div class="layui-input-inline btn-group" style="width: auto;">
            <button class="layui-btn layui-btn-normal" id="searchBtn" style="border-radius: 4px; padding: 0 20px;">搜索</button>
        </div>
        <div class="layui-input-inline btn-group" style="width: auto;">
            <button class="layui-btn layui-btn-primary" id="resetBtn" style="border-radius: 4px; padding: 0 20px;">重置</button>
        </div>
    </div>
</div>

<script>

    /**
      * 执行搜索功能
      */
    function SearchTaskInit($, taskTable, form) {
        // 防抖函数
        function debounce(fn, delay) {
            let timer = null;
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.apply(context, args);
                }, delay);
            };
        }

        // 搜索处理函数
        function doSearch() {
            var keyword = $('#searchKeyword').val().trim();
            var status = $('#searchStatus').val();

            // 空输入框错误提示
            if (!keyword && !status) {
                layer.msg('请输入搜索关键词或选择任务状态', {
                    icon: 2,
                    time: 2000
                });
                return;
            }

            // 重新加载表格数据
            taskTable.reload({
                where: {
                    "uid": userInfo.uid,
                    "keyword": keyword,
                    "status": status
                },
                page: {
                    curr: 1 // 重新从第1页开始
                }
            });
        }

        // 重置后直接重新加载表格（不进行空输入判断）
        function resetAndReload() {
            $('#searchKeyword').val('');
            $('#searchStatus').val('');
            form.render('select');
            
            // 直接重新加载表格数据，不进行空输入判断
            taskTable.reload({
                where: {
                    "uid": userInfo.uid,
                    "keyword": '',
                    "status": ''
                },
                page: {
                    curr: 1 // 重新从第1页开始
                }
            });
        }

        // 创建防抖处理的搜索函数
        const debouncedSearch = debounce(doSearch, 300);

        // 绑定搜索按钮点击事件
        $('#searchBtn').click(function () {
            doSearch();
        });

        // 绑定重置按钮点击事件
        $('#resetBtn').click(function () {
            resetAndReload();
        });

        // 监听回车键执行搜索
        $('#searchKeyword').keypress(function (e) {
            if (e.which === 13) {
                doSearch();
            }
        });

        // 监听状态选择变化
        $('#searchStatus').change(function () {
            doSearch();
        });

        // 监听输入框输入事件，添加防抖处理
        $('#searchKeyword').on('input', function() {
            debouncedSearch();
        });
        
        // 为输入框添加焦点和失焦效果
        $('#searchKeyword').focus(function() {
            $(this).css('border-color', '#409eff');
        }).blur(function() {
            $(this).css('border-color', '#dcdfe6');
        });
    }

</script>